<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--<link rel="stylesheet" href="../../public/css/bootstrap.min.css">-->
		<!--<link rel="stylesheet" href="style.css">-->
		<!--<script src="../../public/js/template.js"></script>-->
		<!--<script src="../../public/js/vue.js"></script>-->
		<script src="../../public/js/jquery.min.js"></script>
		<!--<script src="../../public/js/swiper.min.js"></script>-->
	    <!--<link rel="stylesheet" type="text/css" href="../../public/css/swiper.min.css"/>-->
		<!--<link rel="icon" href="../../public/images/index/title.jpg">-->
		<title>旋转</title>
		<style>
			.introdiv
			{
				width: 50%;
				height:50px;
				margin: 10px;
				border:1px solid red;
			}
			.jiantou
			{
				width: 20px;
				height: 20px;
				float: right;
				border:1px solid red;
				transform: rotate('90deg')
			}
			.xuan
			{
				background: red;
				transform: rotate(90deg)
			}
		</style>
	</head>
	<body>
		


     <div class="b-grey">
	     <div class="b-b-grey">
	     	<div class="col-xs-3" style="height: 88px;width:262px;">
	     		<div class="b-b-b" >
	     			<ul>
	     				<li style="background-color: #ff7046;">
	     					<a href="" ><b class="caret" style="transform: rotate(-90deg);"></b> 产品说明</a>
	     				</li>
	     				<li><a href="" style="color: black;">产品使用</a></li>
	     			</ul>
	     		</div>
	     	</div>
	     	
	     	<div class="col-xs-6 introul">
	     		<ul>
	     			<h5 id="intro">产品说明</h5>
	     			<li>
	     				<div class="introdiv" name='0'>
	     					<a name='0'>软件是不是永久免费？
								<div name='0' class="jiantou"> > </div>
	     					</a>
	     				</div>
	     				<div class="introhide" style="display: none;height: 45px;">
	     					<p>生意专家的基础功能永久免费，并会不定期增加免费版的功能，方便用户使用。</p>
	     				</div>
	     			</li>
	     			<li>
	     				<div class="introdiv" name='1'>
	     					<a name='1'>生意专家各付费版本支持永久买断吗？
	     				    	<div name='1' class="jiantou"> > </div>
	     					</a>
	     				</div>
	     				<div class="introhide" style="display: none;height: 45px;">
	     					<p>不同于传统的店铺管理软件，生意专家的更新迭代速度非常快，各版本不支持一次性永久买断。</p>
	     				</div>
	     			</li>
					 <li>
	     				<div class="introdiv" name='2'>
	     					<a name='2'>软件是不是永久免费？
								<div name='2' class="jiantou"> > </div>
	     					</a>
	     				</div>
	     				<div class="introhide" style="display: none;height: 45px;">
	     					<p>生意专家的基础功能永久免费，并会不定期增加免费版的功能，方便用户使用。</p>
	     				</div>
	     			</li>
	     			<li>
	     				<div class="introdiv" name='3'>
	     					<a name='3'>生意专家各付费版本支持永久买断吗？
	     				    	<div name='3' class="jiantou"> > </div>
	     					</a>
	     				</div>
	     				<div class="introhide" style="display: none;height: 45px;">
	     					<p>不同于传统的店铺管理软件，生意专家的更新迭代速度非常快，各版本不支持一次性永久买断。</p>
	     				</div>
	     			</li>  			   			
	     		</ul> 
	     	</div>
	     	
	     	
	     </div>
     </div>
		
		<script>
		$('#nav').load('nav.html')
	


		var c = 0
		var valu = 0
		var times = true
        $('.introdiv').click(function(e)
        {
			valu = Number(e.target.attributes.name.value)
			e.preventDefault()						
			$('.introhide').eq(valu).slideToggle('300ms')
			$('.jiantou').eq(valu).toggleClass('xuan')
		
			if(c != valu)
			{
				$('.introhide').eq(c).slideUp('300ms')
				$(".jiantou").removeClass("xuan");
				$('.jiantou').eq(valu).toggleClass('xuan')
				c = valu;		
			}	
        })


	    
		
		</script>
	</body>
</html>
